<template>
  <div class="list">
    <header class="list-header">列表</header>
    <div class="list-content">
      <van-tabs
        v-model:active="active"
        animated
        sticky
        @click="onClick"
        offset-top="0.44rem"
      >
        <van-tab
          v-for="item in tabsList"
          :title="item.title"
          :name="item.name"
          :key="item.id"
        >
          <div v-if="!data.length" class="list-shop-list">暂无数据</div>
          <div v-else class="list-shop-list">
            <div class="list-shop-item" v-for="(item, i) in data" :key="i">
              <div class="list-shop-pic">
                <img :src="item.pic" alt="" />
              </div>
              <div class="list-shop-text">
                <div class="list-shop-title">{{ item.title }}</div>
                <div class="list-shop-price">
                  券后<span class="list-rmb">¥</span
                  ><span class="list-shop-jiage">{{ item.jiage }}</span>
                </div>
                <div class="list-shop-quan">
                  <span>券</span>{{ item.quan_jine }}元
                </div>
                <div class="list-shop-num">
                  已抢{{ (item.xiaoliang / 10000).toFixed(1) }}万
                </div>
                <div class="list-shop-name">
                  {{ item.shop_name
                  }}<router-link to=""
                    >进店<van-icon name="arrow" size=".14rem"
                  /></router-link>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="list-load" v-if="loading">
      <van-loading color="#1989fa" />
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const route = useRoute();
    const cid = route.query.cid;
    const onClick = (tar: string) => {
      store.dispatch({
        type: "catList/setload",
      });
      store.dispatch({
        type: `catList/get${tar}`,
        cid: cid,
      });
    };
    onMounted(() => {
      store.dispatch({
        type: "catList/gethot",
        cid: cid,
      });
    });
    const data = computed(() => {
      return store.state.catList.data;
    });
    const loading = computed(() => {
      return store.state.catList.loading;
    });
    const tabsList = ref([
      {
        id: 1,
        title: "人气",
        name: "hot",
      },
      {
        id: 2,
        title: "最新",
        name: "latest",
      },
      {
        id: 3,
        title: "销量",
        name: "sell",
      },
      {
        id: 4,
        title: "价格",
        name: "price",
      },
    ]);
    return {
      tabsList,
      onClick,
      data,
      loading,
    };
  },
});
</script>
<style lang="stylus">
.list
    .list-header
        text-align center
        background linear-gradient(270deg,#fe3c35 0,#ff1f4c 100%)
        color #fff
        font-size .17rem
        line-height .44rem
        position fixed
        top 0
        left 0
        right 0
        z-index 10
    .list-load
        position fixed
        top 0
        left 0
        right 0
        bottom 0
        background rgba(0,0,0,.75)
        display flex
        z-index 100
        justify-content center
        align-items center
.list-shop-list
    padding-top .44rem
.list-shop-item
    display flex
    justify-content center
    border-bottom .01rem solid #ccc
    .list-shop-pic
        padding 0 .1rem
        width 1.26rem
        img
            width 1.26rem
    .list-shop-text
        flex 1
        display flex
        flex-direction column
        padding-top .1rem
        .list-shop-title
            display flex
            font-size .12rem
            line-height .16rem
            height .16rem
            overflow hidden
            text-overflow ellipsis
        .list-shop-price
            color #333
            font-size .12rem
            padding-top .3rem
            .list-rmb
                color red
                margin-left .04rem
            .list-shop-jiage
                font-size .18rem
                color red
        .list-shop-quan
            background red
            align-self flex-start
            font-size .12rem
            display flex
            color #fff
            padding-right .04rem
            margin-top .04rem
            span
                color red
                background #fff
                margin-right .04rem
        .list-shop-num
            color #999
            font-size .12rem
            margin-top .04rem
        .list-shop-name
            color #666
            font-size .14rem
            a
                color #333
                margin-left .1rem
</style>
